<!--
    组件使用注意：外界自适应宽度为100%，长度为73px，上下左右：0，最小浮动层 z-index:0，最大浮动层 z-index:9999, 不脱离文档
    受影响位置：（.header-body） ，（.header-body .hide-panel）
-->
<template>
    <div class="header-body">
        <div class="left-logo">
            <p class="logo-title"><span class="welcome">Welcome / </span>农产品溯源管理系统</p>
        </div>
        <div class="right-icon" @mouseover="isActived = true" @mouseout="toHide()">
            <div class="right-admin">
                <span class="glyphicon glyphicon-user"></span>
                <span> Hi, {{userName}}</span>
            </div>
            <div v-show="isActived" class="hide-panel">
                <ul class="list-group">
                    <li class="list-group-item"><a v-link="{ name: 'profile' }">个人信息</a></li>
                    <li class="list-group-item"><a v-link="{ name: 'editProfile' }">编辑信息</a></li>
                    <li class="list-group-item"><a href="#bs-header-modal-md" data-toggle="modal">修改密码</a></li>
                    <li class="list-group-item"><a href="javascript: void(0)">退出登录</a></li>
                </ul>
            </div>
        </div>

        <div class="modal fade" id="bs-header-modal-md" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
            <div class="modal-dialog modal-md">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title">密码修改</h4>
                    </div>
                    <div class="modal-body form-horizontal">
                        <div class="form-group">
                            <label for="oldpassword" class="col-sm-3 control-label">原密码：</label>
                            <div class="col-sm-9">
                                <input type="password" class="form-control" id="oldpassword">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="newPassword" class="col-sm-3 control-label">新密码：</label>
                            <div class="col-sm-9">
                                <input type="password" class="form-control" id="newPassword">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="newPassword2" class="col-sm-3 control-label">确认新密码：</label>
                            <div class="col-sm-9">
                                <input type="password" class="form-control" id="newPassword2">
                            </div>
                        </div>
                        <div class="btn-group">
                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-success">确认</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    require('../assets/css/components/header.less');
    require('../util/modal');   // 导入Jquery插件:模态框
    module.exports = {
        data: function () {
            return {
                account: '',
                userName: '',
                isActived: false
            }
        },
        methods: {
            toHide: function () {
                this.isActived = false;
            }
        },
        ready: function () {
            var _this = this;
            $.post('/api/planb/adminProFile').then(function (data) {
                _this.account = data.content.account;
                _this.userName = data.content.userName;
            });
        }
    }
</script>